<template>
  <div class="">
    <el-form
      ref="formRef"
      :class="handleType == 'view' ? 'view' : ''"
      :model="form"
      label-align="right"
      label-width="100"
      size="default"
      inline
      :label-position="handleType == 'view' ? 'left' : 'top'"
      :rules="rules"
    >
      <template v-if="handleType == 'view'">
        <el-form-item label="开发人员:">
          {{ form.developer_text }}
        </el-form-item>
        <el-form-item label="产品负责人:">
          {{ form.product_manage_text }}
        </el-form-item>

        <el-form-item label="采购人员:">
          {{ form.purchaser_text }}
        </el-form-item>

        <el-form-item label="质检人员:">
          {{ form.quality_inspector_text }}
        </el-form-item>

        <el-form-item label="图片处理人员:">
          {{ form.img_processor_text }}
        </el-form-item>

        <el-form-item label="编辑处理人员:">
          {{ form.editor_text }}
        </el-form-item>
        <el-form-item label="添加人:">
          {{ form.create_user_text }}
        </el-form-item>
        <el-form-item label="开发审核人:">
          {{ form.dev_reviewer_text }}
        </el-form-item>
        <el-form-item label="物流审核人:">
          {{ form.logistics_reviewer_text }}
        </el-form-item>
        <el-form-item label="运营人员:" style="width: 800px">
          {{ operation_personnel }}
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item
          label="开发人员"
          :required="handleType != 'view'"
          prop="developer_id"
        >
          <select-personnel
            v-model="form.developer_id"
            placeholder="请选择开发人员"
            :disabled="disabled"
            @change="changeDeveloper"
          ></select-personnel>
        </el-form-item>

        <el-form-item label="产品负责人">
          <select-personnel
            v-model="form.product_manage_id"
            placeholder="请选择产品负责人"
            :disabled="disabled"
          ></select-personnel>
        </el-form-item>

        <el-form-item
          label="采购人员"
          :required="handleType != 'view'"
          prop="purchaser_id"
        >
          <select-personnel
            v-model="form.purchaser_id"
            placeholder="请选择采购人员"
            :disabled="disabled"
          ></select-personnel>
        </el-form-item>

        <el-form-item label="质检人员">
          <select-personnel
            v-model="form.quality_inspector_id"
            placeholder="请选择质检人员"
            :disabled="disabled"
          ></select-personnel>
        </el-form-item>

        <el-form-item label="图片处理人员">
          <select-personnel
            v-model="form.img_processor_id"
            placeholder="请选择图片处理人员"
            :disabled="disabled"
          ></select-personnel>
        </el-form-item>

        <el-form-item label="编辑处理人员">
          <select-personnel
            v-model="form.editor_id"
            placeholder="请选择编辑处理人员"
            :disabled="disabled"
          ></select-personnel>
        </el-form-item>

        <el-form-item label="运营人员" style="width: 800px">
          {{ operation_personnel }}
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script setup name="PeopleInfo">
import { reactive, inject } from "vue";
import { scrollToError } from "@/hooks/formScroll.js";
let handleType = reactive(inject("handleType"));

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const disabled = computed(() => {
  return (
    handleType.value == "view" ||
    (handleType.value == "edit" &&
      !(window.BTN_AUTH || []).includes("/goods/task/product/people-info"))
  );
});

const formRef = ref();
const form = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const operation_personnel = computed(() => {
  if (form.value.goods_sku_recommended_platform.length) {
    let user_list = [];
    form.value.goods_sku_recommended_platform.forEach((item) => {
      if (item.operation_user_ids_text) {
        user_list.push(...item.operation_user_ids_text);
      }
    });
    user_list = [...new Set(user_list)];

    return user_list.join("、") || "--";
  } else {
    return "--";
  }
});

const rules = reactive({
  developer_id: [{ required: true, message: "请选择开发人员", trigger: "change" }],
  purchaser_id: [{ required: true, message: "请选择采购人员", trigger: "change" }],
});

//表单校验
const validate = () => {
  return new Promise((resolve, reject) => {
    formRef.value?.validate((valid, fields) => {
      if (valid) {
        resolve(true);
      } else {
        scrollToError(document.querySelector(".is-error"));
        reject(false);
      }
    });
  });
};

const changeDeveloper = (val) => {
  if (val && !form.value.product_manage_id) {
    form.value.product_manage_id = val;
  }
};
defineExpose({ validate });
</script>

<style lang="scss" scoped>
.view {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  :deep(.el-form-item__label) {
    color: #999999;
    font-weight: 400;
  }
  :deep(.el-form-item__content) {
    display: inline-block;
  }
}
.el-form-item {
  min-width: 200px;
}
</style>
